<template>
  <div class="page-container">
    <div class="page-search-card">
      <el-form ref="form" label-width="150px" :model="form">
        <el-row>
          <el-col :span="8">
            <el-form-item label="分配主题：" prop="grantTheme">
              <el-input v-model="form.grantTheme" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分配日期：">
              <el-date-picker
                v-model="dataTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                style="width:100%"
                @change="onDateChange"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="25px">
              <el-button @click="reset">重置</el-button>
              <el-button type="primary" @click="query">查询</el-button>
              <el-button type="primary" @click="exportAll">导出</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="page-table-container" style="height:calc(100% - 95px)">
      <wf-el-table
        height="100%"
        :list="list"
        :total="total"
        :loading="loading"
        :current="current"
        @on-page-change="onPageChange"
        @selection-change="onSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="grantTheme" label="分配主题"></el-table-column>
        <el-table-column prop="amount" label="分配额度(元）" width="150"></el-table-column>
        <el-table-column prop="userNumber" label="分配人数" width="150"></el-table-column>
        <el-table-column prop="totalAmount" label="分配总额度 (元）" width="150"></el-table-column>
        <el-table-column prop="state" label="状态" width="120">
          <template slot-scope="scope">
            {{ ['待确认', '成功', '已取消'][scope.row.state] || '' }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
        <el-table-column label="操作" fixed="right" width="350">
          <template slot-scope="scope">
            <wf-el-auth-button
              auth-key="WALFARE-XXKFFJL-DCQD"
              type="text"
              size="small"
              @click="exportOne(scope.row)"
            >
              导出清单
            </wf-el-auth-button>
            <wf-el-auth-button
              auth-key="WALFARE-XXKFFJL-QRFF"
              type="text"
              size="small"
              :disabled="scope.row.state !== '0'"
              @click="onConfirm(scope.row)"
            >
              确认分配
            </wf-el-auth-button>
            <wf-el-auth-button
              auth-key="WALFARE-XXKFFJL-QXFF"
              type="text"
              size="small"
              :disabled="scope.row.state !== '0'"
              @click="onCancel(scope.row)"
            >
              取消分配
            </wf-el-auth-button>
            <wf-el-auth-button
              auth-key="WALFARE-XXKFFJL-FFXQ"
              type="text"
              size="small"
              @click="onDetail(scope.row)"
            >
              分配详情
            </wf-el-auth-button>
          </template>
        </el-table-column>
      </wf-el-table>
    </div>
    <confirm-distribute ref="confirmDistribute" @on-ok="initTable" />
  </div>
</template>

<script>
  import ConfirmDistribute from './modal/ConfirmDistribute';
  import { downloadBlob } from '@/utils/download';

  import { getDistributeList, exportDistributeUsers, cancelDistribute } from '@/api/careCard';

  export default {
    components: { ConfirmDistribute },
    data() {
      return {
        form: {
          grantTheme: '',
          startTime: '',
          endTime: '',
        },
        dataTime: [],
        list: [],
        total: 0,
        current: 0,
        selectIds: [],
        selectRow: {},
        loading: false,
      };
    },
    // mounted() {
    //   this.initTable();
    // },
    activated() {
      this.initTable();
    },
    methods: {
      async initTable() {
        const params = {
          pageNumber: this.current,
          pageSize: 10,
          ...this.form,
        };
        this.loading = true;
        const { data } = await getDistributeList(params);
        const { records, total } = data;
        this.total = total;
        this.list = records;
        this.loading = false;
      },
      onSelectionChange(data) {
        this.selectIds = data.map(item => item.id);
      },
      onPageChange(data) {
        this.current = data.current;
        this.initTable();
      },
      query() {
        this.current = 1;
        this.initTable();
      },
      reset() {
        this.$refs['form'].resetFields();
        this.dataTime = [];
        this.form.startTime = '';
        this.form.endTime = '';
      },
      async exportAll() {
        if (this.selectIds.length === 0) {
          this.$message.info('请勾选需要导出的数据');
          return false;
        }
        const res = await exportDistributeUsers(this.selectIds);
        res && downloadBlob(res.data, res.filename || '清单.xls');
      },
      async exportOne(row) {
        this.selectIds = [row.id];
        this.exportAll();
      },
      onConfirm(row) {
        this.selectRow = row;
        this.$refs['confirmDistribute'].open(row.id);
      },
      async onCancel(row) {
        this.selectRow = row;
        this.$confirm('您是否确认取消本次分配？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.cancel();
        });
      },
      async cancel() {
        await cancelDistribute(this.selectRow.id);
        this.current = 1;
        this.initTable();
      },
      onDateChange(value) {
        [this.form.startTime = '', this.form.endTime = ''] = value || [];
      },
      onDetail(row) {
        this.$router.push({ path: '/careCard/distributeDetail', query: { id: row.id } });
      },
    },
  };
</script>

<style lang="scss" scoped></style>
